<template>
    <vol-box :lazy="true" v-model="model" title="选择物料" :width="900" :padding="0">
      <div>
        <!-- 搜索配置 -->
        <div class="search-form">
          <label>编码：</label>
          <el-input style="width: 120px" v-model="code"></el-input>
          <label style="margin-left: 10px">名称：</label>
          <el-input style="width: 120px" v-model="name"></el-input>
          <el-button size="small" type="primary" @click="search">搜索</el-button>
        </div>
        <!-- 表格数据 -->
        <vol-table ref="tableRef" :loadKey="true" :columns="columns" :pagination-hide="false" :height="370" :url="url"
          :single="single" @loadBefore="loadBefore"></vol-table>
      </div>
      <template #footer>
        <el-button type="primary" @click="detailSelectClick" size="small">选择数据</el-button>
      </template>
    </vol-box>
  </template>
  <script setup>
  import { ref, nextTick, getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  const tableRef = ref()
  const model = ref(false)
  //调用的接口地址,这里使用的生成页面的接口，也可以参照：组件示例->table组件中自定义配置
  const url = ref('api/project_maintenance/GetPageData')
  
  //是否单选(明细表格选择数据)
  const single = ref(false);
  const detailRow = ref({})
  
  const code = ref('') //物料编码
  const name = ref('') //物料名称
  
  //表格配置(可以将生成vue文件中columns配置复制过来)
  //表格更多配置见:组件示例->voltable表格组件
  const columns = ref([
    { field: 'code', title: '编码', type: 'string', width: 120 },
    { field: 'name', title: '名称', type: 'string', width: 160 },
    { field: 'way', title: '检验方式',bind:{ key:'检验方式',data:[]}, type: 'string', width: 90 },
    { field: 'value_type', title: '值类型',bind:{ key:'值类型',data:[]}, type: 'string', width: 90 },
    { field: 'standard_of_criterion', title: '判定基准', type: 'string', width: 90 },
    { field: 'createdusername', title: '创建人', type: 'string', width: 90 },
    { field: 'createdtime', title: '创建时间', type: 'datetime', width: 160 }
  ])
  //弹出框打开选择数据
  const open = (row) => {
    //明细表表格选择数据传进来的当前行
    detailRow.value = row;
    //如果是明细表表格传进来的按钮，表格设置为单选
    single.value = !!row;
    model.value = true
    //刷新表格的数据
    nextTick(() => {
      tableRef.value?.load(null, true)
    })
  }
  const emit = defineEmits(['onSelect'])
  //选择数据按钮
  const detailSelectClick = () => {
    //回写数据到明细表
    let rows = tableRef.value.getSelected()
    if (!rows.length) {
      return proxy.$message.error('请选择数据')
    }
    //如果是明细表表格传进来的按钮,直接给表格行数据设置值
    if (detailRow.value) {

    detailRow.value.name = rows[0].name;

  } else {
    //选择数据回调
    emit('onSelect', rows)
  }
    model.value = false;
  }
  //查询点击事件
  const search = () => {
    tableRef.value.load(null, true)
  }
  //表数据加载设置查询条件
  const loadBefore = (param, callBack) => {
    param.wheres = [
      { name: 'code', value: code.value, displayType: 'like' },
      { name: 'name', value: name.value, displayType: 'like' }
    ]
    callBack(true)
  }
  //暴露方法给【选择物料】按钮使用
  defineExpose({
    open
  })
  </script>
  <style lang="less" scoped>
  .search-form {
    display: flex;
    padding: 10px;
    line-height: 34px;
    button {
      margin-left: 10px;
    }
  }
  </style>
  